 // 1.利用循环对每一个按钮添加事件
import "./index.css"
let li = document.querySelectorAll("li");
for (let i = 0; i < li.length; i++) {
  li[i].addEventListener("click", function () {
    //先移除有active的类
    let active = document.querySelector(".active");
    active.classList.remove("active");
    // 移除完再对点击的tab添加active类
    li[i].classList.add("active");
    let tabContent = document.querySelector(".tab-content");
    // 对tab-content
    tabContent.innerHTML = `内容${i + 1}`;
  });
}
//
//
// 2.利用事件委托对小li进行添加监听器
let ul = document.querySelector("ul");
let tabContent = document.querySelector(".tab-content");
// 对li的父盒子进行时间绑定，实现事件委托
ul.addEventListener("click", function (e) {
  // 查找当前有没有active已被激活的标签
  let active = document.querySelector(".active");
  // 如果点击ul里面的内容标签为li，则进行移除原有的active类，给对应的标签添加active类
  if (e.target.tagName === "LI") {
    // 移除active和添加active
    active.classList.remove("active");
    e.target.classList.add("active");
    tabContent.innerHTML = "内容" + e.target.innerHTML.slice(2);
  }
});